<template>
  <div class="map">
    <!-- 初始化echarts -->
    <div class="center" align="center" ref="mapbox" style="height: 500px"></div>
  </div>
</template>

<script>
import echarts from 'echarts'
import '@/assets/map/china.js' //import中国地图
import jsonp from 'jsonp'

// 使用地图需要先注册
const options = {
  title: {
    text: '全国疫情地图',
    textStyle: {
      //fontWeight: 'bolder',
      fontSize: 16,
      color: 'black'
    },
    x: 'left',
    subtextStyle: {
      fontSize: 18
    }
  },

  visualMap: {
    show: true,
    x: 'left',
    y: 'bottom',
    pieces: [
      { min: 10000 },
      { min: 1000, max: 9999 },
      { min: 100, max: 999 },
      { min: 10, max: 99 },
      { min: 1, max: 9 }
    ],
    color: ['#671E20', '#BC3A37', '#D56355', '#E9A188', '#FAEBD2']
  },

  tooltip: {
    trigger: 'item' //提示框
  },
  toolbox: {
    show: true,
    //orient: 'vertical',
    itemSize: 15,
    itemGap: 10,
    feature: {
      dataView: { readOnly: true },
      saveAsImage: {
        name: '全国疫情地图'
      }
    }
  },

  series: [
    {
      name: '确诊人数',
      type: 'map', //echats要渲染的是地图类型
      map: 'china', //渲染中国地图
      label: {
        //控制对应地区的汉字
        show: true,
        color: 'black', //控制地区字体颜色
        fontSize: 8
      },
      itemStyle: {
        //地图区域
        areaColor: 'sgray'
      },
      // roam: 'scale', //用户可根据滑轮缩放地图
      zoom: 1.25, //放大或缩小地图
      emphasis: {
        //控制高亮区域：鼠标位置
        label: {
          color: 'black',
          fontSize: 10
        },
        itemStyle: {
          areaColor: '#83b5e7'
        }
      },

      data: [
        //展示后台数据
      ]
    }
  ]
}

export default {
  name: 'chinaMap',
  mounted() {
    this.get_Data()
    this.mychart = echarts.init(this.$refs.mapbox)
    this.mychart.setOption(options)
  },

  methods: {
    get_Data() {
      //使用数据接口获取json数据包
      jsonp(
        'https://gwpre.sina.cn/interface/fymap2020_data.json?_=1590550575291&callback=dataAPIData',
        {},
        (err, data) => {
          if (!err) {
            //代表请求数据成功
            // console.log(data)
            let list = data.data.list.map(item => ({
              name: item.name,
              value: item.value
            }))
            // console.log(list)
            options.series[0].data = list
            this.mychart.setOption(options) //DOM已经渲染完成才能执行
          }
        }
      )
    }
  }
}
</script>

<style>
#center {
  text-align: center;
  margin: 0 auto;
  width: 100%;
}
</style>
